<template>
    <div class="big-box">
        <header class="title">
            <h2>图书馆数字可视化大屏</h2>
        </header>
        <section class="box" @click="goShowData()">
            <section class="left" >
                <page2 class="title1">
                    广东省公共图书馆排名
                    <one2></one2>
                </page2>
            
            </section>
            <section class="right">
                <page2 class="title1">
                    全国公共图书馆排名
                    <two2></two2>
                </page2>
               
            </section>
            
        </section>
    </div>
    </template>
    
    <script>
    import page2 from "@/components/slot2.vue"  
    import one2 from "@/components/one2.vue"  
    import two2 from "@/components/two2.vue"  
  

    import {inject} from "vue"
    export default {
        components:{
            page2,
            one2,
            two2
     

           
        },
        setup(){
            let $echarts =inject("echarts")
            console.log($echarts)
        },
        methods:{
            goShowData(){
                this.$router.push('one')
            }
            
        }
    
    }
    </script>
    
    <style lang="less">
    
        header{
        height: 1.2rem;
        width: 100%;
        // background-color:rgba(0,0,250,0.2);
        background: url("../assets/可视化/title.png");
        h2{
        font-size: 0.6rem;
        color: aliceblue;
        text-align: center;
        line-height: 1.2rem;
    }
    }
    .box{
        display: flex;
        flex-direction: column;
        height: 91vh; 
    .left,.right{
        flex: 1;
        width: 50%; 
        height: 40%; 
        // border: 1px solid black; 
    } 
    .title1{
        text-align: center;
        font-size: 22px;
        color: aliceblue;
    }
    }
    
    
    
    
    </style>